<template>
	<view>
		<cu-custom :bgColor="'bg-'+ theme.themeColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品详情</block>
		</cu-custom>
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500" style="height: 650rpx;">
			<swiper-item v-for="(item,index) in dataObj.spuUrls" :key="index">
				<image :src="item" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<view class="padding-sm margin-bottom-sm solid-top  bg-white">
			<view class="flex">
				<text class="text-price text-xl padding-right-xs"
					:class="'text-'+ theme.themeColor">{{dataObj.highPrice != dataObj.lowPrice ?  dataObj.lowPrice+' - '+dataObj.highPrice: dataObj.highPrice}}</text>
			</view>
			<view>
				<view class="text-black  margin-tb-sm">{{dataObj.name}}</view>
				<view class="text-grey text-sm" v-if="dataObj.subTitle">{{dataObj.subTitle}}</view>
			</view>
		</view>
		<view class="cu-bar bg-white" v-if="dataObj.enableSpecs == '1'">
			<view class="flex align-center" @tap="selectSku('-1')" style="width: 100%;">
				<view class="flex-sub text-sm">
					<view class="text-gray margin-left-sm">选择</view>
				</view>
				<view class="flex-treble text-sm text-black padding-tb">
					<text v-for="(item,index) in goodsSpuSpecsList" :key="index" v-if="!selectedSku">
						{{item.specsName}}{{index == goodsSpuSpecsList.length-1 ?'' :' / '}}
					</text>
					<text v-if="selectedSku" class="hx-overflow-1">
						已选：{{selectedSku.specsInfo}}
					</text>
					<view>
						<view class="cu-avatar radius  margin-right-sm" style="margin-left: 0rpx;"
							v-for="i in goodsSpuSpecsList[0].goodsSkuSpecsValues.length >=4 ? 4: goodsSpuSpecsList[0].goodsSkuSpecsValues.length"
							:key="i"
							:style="'background-image:url(' + goodsSpuSpecsList[0].goodsSkuSpecsValues[i].picUrl + ')'">
						</view>
						<text
							class="padding-xs radius text-sm" :class="'bg-'+ theme.themeColor">共{{goodsSpuSpecsList[0].goodsSkuSpecsValues.length}}种{{goodsSpuSpecsList[0].specsName}}可选</text>
					</view>
				</view>
				<view class="flex-sub text-sm text-gray text-right">
					<text class="cuIcon-right margin-right-sm"></text>
				</view>
			</view>
		</view>

		<view class="cu-bar bg-white">
			<navigator class="flex align-center" style="width: 100%;" hover-class="none"
				url="/pages/user/user-address/index">
				<view class="flex-sub text-sm">
					<view class="text-gray margin-left-sm">发货</view>
				</view>
				<view class="flex-treble text-sm text-black padding-tb">
					{{dataObj.freightTemplate.address}}
					<text class="text-gray padding-lr-xs">|</text>
					<text>{{'快递：'+getPostage}}</text>
					<view class="padding-tb-xs text-gray text-sm" v-if="addressInfo">
						配送至：{{addressInfo.provinceName}} {{addressInfo.cityName}} {{addressInfo.countyName}}
					</view>
				</view>
				<view class="flex-sub text-sm text-gray text-right">
					<text class="cuIcon-right margin-right-sm"></text>
				</view>
			</navigator>
		</view>
		<view class="cu-card bg-white margin-top-xs">
			<view class="flex solid-bottom padding justify-between">
				<text>商品评价</text>
				<text v-if="goodsAppraiseList && goodsAppraiseList.length >0" @tap="tapGoodsAppraise">查看更多 <text
						class="cuIcon-right"></text></text>
			</view>
			<view v-if="goodsAppraiseList && goodsAppraiseList.length >0" v-for="(item,index) in goodsAppraiseList"
				:key="index">
				<view class="cu-item">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="'background-image:url(' + item.avatarUrl + ')'">
							</view>
							<view class="content flex-sub">
								<view>{{item.nickName}}</view>
								<view class="text-gray text-sm flex justify-between">
									{{item.createTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="text-content padding-lr margin-tb-sm">
						{{item.content}}
					</view>
					<view class="grid flex-sub padding-lr col-3 grid-square solid-bottom">
						<view class="bg-img" :style="'background-image:url(' + itemPic + ')'"
							v-for="(itemPic,index) in item.picUrls " v-if="index<3" :key="index">
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-top-xs">
			<view class="flex justify-center padding-tb-lg">
				<text>商品详情</text>
			</view>
			<u-parse :content="dataObj.description" />
		</view>
		<view class="cu-tabbar-height"></view>
		<!-- 底部操作栏 -->
		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="action" @tap="toHome" >
				<view class="cuIcon-home ">
				</view>
				<text>首页</text>
			</button>
			<view class="action" @tap="toCart" >
				<view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				<text>购物车</text>
			</view>
			<view class="btn-group">
				<button class="cu-btn round shadow-blur" :class="'bg-'+ theme.matchColor"
					@tap="selectSku('1')">加入购物车</button>
				<button class="cu-btn round shadow-blur" :class="'bg-'+ theme.themeColor"
					@tap="selectSku('2')">立即购买</button>
			</view>
		</view>
		<GoodsSku :goodsSpuSpecsList="goodsSpuSpecsList" :goodsSpu="dataObj" :specSelected="selectedSku"
			:skuModal="skuModal" :modelTpye="modelTpye" @changeSpuSpecsValue="goodsSpuSpecsList =$event"
			@changeSkuModal="skuModal = $event" @changeSpecSelected="selectedSku =$event"></GoodsSku>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import GoodsSku from '@/components/goods-sku/index.vue'
	export default {
		components: {
			uParse,
			GoodsSku
		},
		data() {
			return {
				theme: getApp().globalData.theme,
				dataObj: {}, // 商品详情
				freightTemplate: {}, //运费模版
				goodsAppraiseList: [], // 商品评论
				addressInfo: null,
				goodsSpuSpecsList: [],
				skuModal: false,
				selectedSku: null,
				modelTpye: '' // 1.购物车；2.直接下单 -1.未选择

			};
		},
		onLoad(props) {
			console.log("theme" + getApp().globalData.theme.themeColor)
			getApp().initPage().then(res => {
				if (props.id) {
					this.getDetail(props.id);
					this.getDefaultAddress();
				}
			})
		},
		computed: {
			getPostage() {
				if (this.dataObj.freightTemplate) {
					if (this.dataObj.freightTemplate.isInclPostage == '1') {
						return '包邮';
					}
					if (this.dataObj.freightTemplate.isInclPostageByIf == '1') {
						return '满' + this.dataObj.freightTemplate.fullAmount + '元包邮';
					}
					return this.dataObj.freightTemplate.firstFreight + "元起";
				} else {
					return null;
				}

			}
		},
		methods: {
			/**
			 * 查询商品详情
			 */
			getDetail(id) {
				uni.$myRequest.goodsSpuById(id).then(res => {
					this.dataObj = res.data
					this.getGoodsAppraise();
					this.getGoodsSpusPecsList(this.dataObj.id)

				});
			},
			getGoodsSpusPecsList(id) {
				let params = {
					spuId: id
				}
				uni.$myRequest.goodsSpuSpecsList(params).then(res => {
					let goodsSpecss = res.data;
					goodsSpecss.forEach(function(item) {
						item.checkedId = ''
						item.goodsSkuSpecsValues.forEach(function(item2) {
							item2.disabled = false
						})
					})
					this.goodsSpuSpecsList = goodsSpecss
				});
			},

			/**
			 * 查询最近两条商品评论
			 */
			getGoodsAppraise() {
				let page = {
					current: 1,
					size: 2,
					spuId: this.dataObj.id,
					descs: 'create_time'
				}
				uni.$myRequest.goodsAppraisePage(page).then(res => {
					this.goodsAppraiseList = res.data.records
				})
			},
			/**
			 * 获取已登录用户默认收货地址
			 */
			getDefaultAddress() {
				let userInfo = uni.getStorageSync('userInfo');
				console.log(userInfo)
				if (userInfo && userInfo.id) {
					uni.$myRequest.defaultAddress().then(res => {
						this.addressInfo = res.data
					})
				}

			},

			/**
			 * 跳转商品评论列表
			 */
			tapGoodsAppraise() {
				uni.navigateTo({
					url: "/pages/goods/goods-appraise/index?spuId=" + this.dataObj.id
				})
			},
			/**
			 * 跳转首页
			 */
			toHome() {
				uni.reLaunch({
					url: '/pages/home/index'
				})
			},
			/**
			 * 跳转购物车
			 */
			toCart() {
				uni.switchTab({
					url: '/pages/shopping-cart/index'
				});
			},
			/**
			 * sku选择
			 */
			selectSku(type) {
				this.modelTpye = type;
				console.log(this.dataObj.enableSpecs)
				if (this.dataObj.enableSpecs == '0') {
					this.selectedSku = this.dataObj.goodsSkus[0]
				}
				this.skuModal = true

			},
			// changeSpecSelected(data) {
			// 	this.selectedSku = data
			// }

		}
	}
</script>

<style lang="scss">

</style>
